<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>socket.io在线聊天室</title>
  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js" integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous"></script>
</head>

<body>
  <div id="listContainer"></div>
  <div id="msg"></div>
  <input type="text" id="text">
  <input type="button" value="发送" onclick="send()">


  <script>

    var arrList = []

    var socket = io.connect('http://127.0.0.1:3000')

    function send() {
      var text = document.getElementById('text').value
      socket.emit('sendMsg',text)
    }

    socket.on('pushMsg',(data)=>{
      console.log('---',data)
      arrList.push(data)
      updateList() 
      
    })

    function updateList() {
      console.log('11111111111111111111')
      
      var container = document.getElementById('listContainer');
      container.innerHTML = ''; // 清空容器
      arrList.forEach(function(item) {
        var div = document.createElement('div');
        div.textContent = item;
        container.appendChild(div);
   });
  }



  </script>


</body>
</html>